<template>
	<view style="">
		<!-- <u-navbar back-icon-color="#000000" :title="title" title-color="#3F3F3F" :border-bottom="false" :title-bold="true" :background="background"></u-navbar> -->
		<u-navbar :back-text="title" :border-bottom="false" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<view class="yqmx_box" style="padding-top: 80rpx;padding-bottom: 102rpx;">
			<view class="yqmx_bg" style="">
				<view class="yqmx_bg2" style="">
					<view v-if="type == 1" class="yqmx_title" style="">
						<view class="yqmx_text" style="">类型</view>
						<view class="yqmx_text" style="">金额</view>
						<view class="yqmx_text" style="">时间</view>
					</view>
					<view v-else-if="type == 3" class="yqmx_title" style="">
						<view class="yqmx_text" style="">邀请用户</view>
						<view class="yqmx_text" style="">累计消费</view>
						<view class="yqmx_text" style="">奖励金额</view>
					</view>
					<view v-else class="yqmx_title" style="">
						<view class="yqmx_text" style="">用户名</view>
						<view class="yqmx_text" style="">订单号</view>
						<view class="yqmx_text" style="">冻结中奖励</view>
					</view>
					<view class="" style="width:100% ;position: relative; min-height: 900rpx;padding-bottom: 20rpx;">
						<!-- <view style="width:100%;display: flex;justify-content: center;align-items: center;padding-top: 15rpx;">
						<view style=" width: 33%; background-color: #01AAED;">的韩国法院回家的过程与电视有</view>
						<view style="background-color: #07BD44;width: 33%;  ">的韩国法院回家的过程与电视有很多故事与</view>
						<view style="background-color: #01AAED;  width: 33%;">的韩国法院回家的过程与电视有</view>
					</view> -->

						<view
							v-if="type == 2"
							v-for="(item, index) in list"
							:key="index"
							style="width: 100%;display: flex;align-items: center; justify-content: center;padding-top: 15rpx;"
						>
							<view class="yqmx_text" style="">{{ item.nickName }}</view>
							<view class="yqmx_text" style="">{{ item.orderCode }}</view>
							<view class="yqmx_text" style="">{{ item.income }}</view>
						</view>
						<view v-if="type == 3" v-for="(item, indexs) in list" :key="indexs" style="display: flex;justify-content: center;align-items: center;padding-top: 15rpx;">
							<view class="yqmx_text" style="">{{ item.nickName }}</view>
							<view class="yqmx_text" style="">{{ item.totalFrom }}</view>
							<view class="yqmx_text" style="">{{ item.income }}</view>
						</view>
						<view v-if="type == 1" v-for="(item, index) in txlist" :key="index" style="display: flex;justify-content: center;align-items: center;padding-top: 15rpx;">
							<view class="yqmx_text" style="">
								<text v-if="item.type == 0">冻结与余额转换</text>
								<text v-else-if="item.type == 1">收入</text>
								<text v-else="item.type == 2">支出</text>
							</view>

							<view class="yqmx_text" style="">{{ item.amount }}</view>
							<view class="yqmx_text" style="">{{ item.createTimeStr }}</view>
						</view>
						<view style="position: absolute;width: 100%;top: 0;left: 0;height: 100%;">
							<view style="width:100%;display: flex;justify-content: center;flex-wrap: nowrap;height: 100%;">
								<view class="yqmx_text" style="border-right: 2rpx solid #F44B02;"></view>
								<view class="yqmx_text" style="border-right: 2rpx solid #F44B02;"></view>
								<view class="yqmx_text" style=""></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<!-- <view>{{list}}</view> -->
	</view>
</template>

<script>
var that;
export default {
	data() {
		return {
			page: 1,
			textStyle: {
				color: '#272755'
			},
			type: '',
			title: '',
			list: '',
			txlist: []
		};
	},
	onLoad(option) {
		that = this;
		that.type = option.type;
		that.page = 1;
		that.list = [];
		that.txlist = [];

		if (option.type == 1) {
			this.title = '余额明细';
			that.tixianList();
		} else if (option.type == 2) {
			this.title = '冻结金额';
			that.dongjieList();
		} else {
			this.title = '邀请明细';
			that.mingxiList();
		}
	},
	onReachBottom() {
		that.page += 1;

		if (that.type == 1) {
			that.tixianList();
		} else if (that.type == 2) {
			that.dongjieList();
		} else {
			that.mingxiList();
		}
	},

	methods: {
		// 邀请明细
		mingxiList() {
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'user-stream/invite/page'
			};
			let data = {
				page: that.page,
				pageSize: 15
			};
			this.http.httpTokenRequest(opts, data).then(res => {
				//打印请求返回的数据
				if (res.code == '200') {
					if (res.data.records.length > 0) {
						if (that.page == 1) {
							that.list = [];
							that.list = res.data.records;
						} else {
							that.list = that.list.concat(res.data.records);
						}
					} else if (that.list.length > 0 && res.data.records.length == 0) {
						uni.showToast({
							title: '加载完了~',
							icon: 'none'
						});
					}
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		},
		// 可提现余额
		tixianList() {
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'user-stream/balance/page'
			};
			let data = {
				page: that.page,
				pageSize: 15
			};
			this.http.httpTokenRequest(opts, data).then(res => {
				//打印请求返回的数据
				if (res.code == '200') {
					if (res.data.records.length > 0) {
						if (that.page == 1) {
							that.txlist = res.data.records;
						} else {
							that.txlist = that.txlist.concat(res.data.records);
						}
					} else if (that.txlist.length > 0 && res.data.records.length == 0) {
						uni.showToast({
							title: '加载完了~',
							icon: 'none'
						});
					}
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		},
		// 冻结明细
		// 邀请明细
		dongjieList() {
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'user-stream/frozen/page'
			};
			let data = {
				page: that.page,
				pageSize: 15
			};
			this.http.httpTokenRequest(opts, data).then(res => {
				//打印请求返回的数据
				if (res.code == '200') {
					if (res.data.records.length > 0) {
						if (that.page == 1) {
							that.list = res.data.records;
						} else {
							that.list = that.list.concat(res.data.records);
						}
					} else if (that.list.length > 0 && res.data.records.length == 0) {
						uni.showToast({
							title: '加载完了~',
							icon: 'none'
						});
					}
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		}
	}
};
</script>

<style>
page {
	background-color: #ffaa00;
}

.yqmx_box {
	width: 100%;
	height: 100%;
	background-image: url(https://beedao.oss-cn-beijing.aliyuncs.com/3873f9e294544db6912dd3f975e4eef4.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	min-height: 812px;
	/* background-color: #fca800; */
}

.yqmx_bg {
	width: 92%;
	margin: auto;
	background-color: #f44b02;
	border-radius: 30rpx;
	padding: 26rpx 0px;
}

.yqmx_bg2 {
	width: 93%;
	margin: auto;
	background-color: #fce4c5;
	border-radius: 30rpx;
}

.yqmx_title {
	width: 100%;
	border-bottom: 2rpx solid #ff6009;
	display: flex;
	padding: 20rpx 0rpx;
	justify-content: center;
	flex-wrap: nowrap;
}

.yqmx_text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* flex: 1; */
	width: 33%;
	text-align: center;
	color: #f44b02;
	font-size: 30rpx;
}
</style>
